import axios from "axios";
import React, { use, useDebugValue, useId, useState, useSyncExternalStore } from "react";
import './App.scss'
import { createPortal } from "react-dom";


function App() {

  const [isShow, setIsShow] = useState(false)

  // createPortal 创建一个弹出的传送内容
  // 参数1 是传送的内容，内容可以是一个完整的组件
  // 参数2 是传送到哪里去
  const portalHtml = isShow && createPortal(<div className="portal" onClick={() => {
    setIsShow(false)

  }
  }>
    <div onClick={(e) => { 
      // 阻止事件冒泡
      e.stopPropagation() }}>
      <h2>温馨提示 <span onClick={() => setIsShow(false)}>关闭</span> </h2>
      <section>今天是周五，明天可以躺平了，后天我也能躺平了，好开心啊。</section>
    </div>
  </div>, document.querySelector('#ma'))

  return <div>
    <h1>App</h1>
    <div id="ma"></div>
    {portalHtml}
    <button onClick={() => {
      setIsShow(true)
    }}>点击显示</button>


  </div>
}


export default App